<template>
  <div class="page-operation">
    <el-button type="primary" @click="handleInsertRole">Insert Role</el-button>
  </div>
  <div class="page-filter">
    <el-form inline @submit.prevent="handleSearch" :disabled="isLoadingList">
      <el-form-item label="Status">
        <el-select placeholder="Search" v-model="roleListParams.status">
          <el-option value label="All"></el-option>
          <el-option value="1" label="Active"></el-option>
          <el-option value="0" label="Inactive"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Role">
        <el-input placeholder="Search" v-model="roleListParams.role_name"></el-input>
      </el-form-item>
      <el-form-item label>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="page-container" v-loading="isLoadingList">
    <el-table :data="roleList">
      <el-table-column label="ID" prop="id" width="100"></el-table-column>
      <el-table-column label="Role Name" prop="role_name" width="100"></el-table-column>
      <el-table-column label="Permissons" prop="rules" show-overflow-tooltip></el-table-column>
      <el-table-column label="Status" width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.loading"
            @change="handleSetRoleStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="Action" fixed="right" align="right" width="100">
        <template #default="scope">
          <el-button type="text" @click="handleEditRole(scope.row)">Edit</el-button>
          <el-popconfirm
            title="It cannot be restored after deletion. Are you sure you want to delete it ?"
            @confirm="handleDeleteRole(scope.row)"
          >
            <template #reference>
              <el-button type="text">Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:size="roleListParams.limit"
      v-model:index="roleListParams.page"
      :total="roleTotal"
      :on-change="handleGetRoleList"
    />
  </div>

  <EditRole v-model="isEditVisible" v-model:id="roleID" @submit="handleGetRoleList" />
</template>
<script setup lang="ts">
import { deleteRole, getRoleList, setRoelStatus } from '@/api/role'
import { reactive, ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import EditRole from './edit.vue'

// 1. get role list
const roleListParams = reactive({
  page: 1,
  limit: 10,
  status: '',
  role_name: '',
})

const roleList = ref<RoleType[]>([])

const roleTotal = ref(0)
const isLoadingList = ref(false)

function handleGetRoleList() {
  isLoadingList.value = true
  getRoleList(roleListParams)
    .then(res => {
      roleList.value = res.list
      roleTotal.value = res.count
    })
    .finally(() => {
      isLoadingList.value = false
    })
}

handleGetRoleList()

// 2. search
function handleSearch() {
  roleListParams.page = 1
  handleGetRoleList()
}

// 3. insert role
const isEditVisible = ref(false)

function handleInsertRole() {
  isEditVisible.value = true
}

// 4. update role
const roleID = ref<null | number>(null)

function handleEditRole(row: RoleType) {
  roleID.value = row.id
  isEditVisible.value = true
}

// 4. delete role
function handleDeleteRole(row: RoleType) {
  deleteRole(row.id).then(() => {
    handleGetRoleList()
  })
}

// 5. set role status
function handleSetRoleStatus(row: RoleType) {
  row['loading'] = true
  setRoelStatus(row.id, row.status).finally(() => {
    handleGetRoleList()
  })
}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </script>
